<template>
  <span v-if="readonly">
    {{ formula }}
  </span>
  <div v-else>
    <el-input
      v-model="formula"
      :readonly="true"
      :placeholder="placeholder"
    >
      <template slot="suffix">
        <i
          v-if="clearable"
          style="margin-right: 20px;cursor: pointer;"
          class="el-icon-delete-solid"
          @click="clear"
        />
        <i
          class="el-icon-setting"
          style="cursor: pointer;"
          @click="open"
        />
      </template>
    </el-input>
    <formulaEdit :field-list="fieldList" :formula="value" :visible.sync="visible" @save="save" />
  </div>
</template>

<script>
import formulaEdit from './formulaEdit.vue'
export default {
  components: {
    formulaEdit
  },
  props: {
    clearable: {
      type: Boolean,
      default: true
    },
    value: {
      type: Object,
      default: null
    },
    fieldList: {
      type: Array,
      default: null
    },
    placeholder: {
      type: String,
      default: '编辑公式'
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formula: null,
      visible: false
    }
  },
  computed: {
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.formula = val.Formula
        } else {
          this.formula = null
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    clear() {
      this.formula = null
      this.$emit('input', null)
      this.$emit('change', null)
    },
    open() {
      this.visible = true
    },
    save(data) {
      this.formula = data ? data.Formula : ''
      this.$emit('input', data)
      this.$emit('change', data)
    }
  }
}
</script>
